<template>
   <HorizonScroll :target="target">
      <template v-slot:carousel_content>
        <section class="XinDie_main">
          <div class="index_hd">
        <div class="index_title">
          <h2 class="icon_txt"> 新碟首发</h2>
        </div>
      </div>
        <div class="tab_index">
          <a href="#">内地</a>
          <a href="#">港台</a>
          <a href="#">欧美</a>
          <a href="#">韩国</a>
          <a href="#">日本</a>
          <a href="#">其他</a>
        </div>

        <div class="carousel slide" id="carousel_XinDie">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
            </div>
            <div class="carousel-item">
              <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
            </div>
            <div class="carousel-item">
              <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
            </div>
          </div>
        </div>
      </section>
      </template>
   </HorizonScroll>
</template>
  
  <script>
  const PathFolder = require.context('@/assets/xindie', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数
 import HorizonScroll from '../HorizonScroll.vue';
 import ItemCard from '../ItemCard.vue';
  export default {
    name: 'XinDie',
    components: {
    HorizonScroll,
    ItemCard
    },
    data(){
      return{
        Shownums:10,
        target:'#carousel_XinDie',
        PathFolder
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
    @import '@/Style/scss/title.scss'; 
    @import '@/Style/scss/_variables.scss';
    .XinDie_main{
      width: 1200px;
    }
    .wrap{//不可删除，这是通过horizonscroll组件控制背景色的属性
      background-color: $secondary-color;
    }
    .index_title{
      background-position: $bg-offset-xindie;
    }
  </style>
  